@use './variables.scss' as *;

// ==================== 主题变量定义 ====================
:root {
  // 浅色主题
  --primary-color: #{$primary-color};
  --primary-light: #{$primary-light};
  --primary-dark: #{$primary-dark};
  --secondary-color: #{$secondary-color};
  --accent-color: #{$accent-color};
  
  --text-primary: #{$text-primary};
  --text-secondary: #{$text-secondary};
  --text-tertiary: #{$text-tertiary};
  
  --bg-primary: #{$bg-primary};
  --bg-secondary: #{$bg-secondary};
  --bg-tertiary: #{$bg-tertiary};
  
  --border-color: #{$border-color};
  
  --shadow-sm: #{$shadow-sm};
  --shadow-md: #{$shadow-md};
  --shadow-lg: #{$shadow-lg};
  --shadow-xl: #{$shadow-xl};
}

// 深色主题
[data-theme="dark"] {
  --text-primary: #{$dark-text-primary};
  --text-secondary: #{$dark-text-secondary};
  --text-tertiary: #{$dark-text-tertiary};
  
  --bg-primary: #{$dark-bg-primary};
  --bg-secondary: #{$dark-bg-secondary};
  --bg-tertiary: #{$dark-bg-tertiary};
  
  --border-color: #{$dark-border-color};
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
}

